<template>
	<view class="searchContainer">
		<view class="flex">
			<view class="flex searchBox">
				<image src="../../static/images/searchIcon.png" class="searchIcon"></image>
				<input type="text" v-model="searchVal" @input="inputChange" confirm-type='search' placeholder="请输入搜索关键字" class="inputBox" />
				<!-- <input type="text" v-model="searchVal" :changeValue="changeValue" placeholder="请输入搜索关键字" class="inputBox" /> -->
				<image src="../../static/images/searchCloseIcon.png" class="searchIcon" v-show="hasResult" @click="clearSearchVal()"></image>
			</view>
			<button @click="inputChange()" class="searchBtn">搜索</button>
		</view>
		<block v-if="historyList.length > 0">
			<view class="historySearchBox flex">
				<view class="historySearchTit">历史搜索</view>
				<image src="../../static/images/delIcon.png" class="delIcon" @click="delHistory()"></image>
			</view> 
			<view class="historyListBox">
				<view class="historyListItem" v-for="item,index in historyList" :key="index" @click="searchList(item.content,1)">{{item.content}}</view>
			</view>
		</block>
		
		<!-- 查到数据 -->
		<block v-if="searchVal != '' && dataList.length > 0">
			<scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }" @scrolltolower="lower" :scroll-top="scrollTop">
				<view class="searchListBox">
					<view class="yuyueItem" v-for="item,index in dataList" :key="index" @click="jumpPage(item.laboratoryId)">
						<view class="yuyueTxt txtOverFlow">{{item.laboratoryNum}}</view>
						<view class="yuyueSubTxt txtOverFlow">{{item.laboratoryName}}</view>
					</view>
				</view>
			</scroll-view>
		</block>
		<view v-else-if="searchVal!=''" class="noDataTxt">暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyList: [],
				dataList:[],
				searchVal:'',//查询条件
				hasResult: false,//是否查到结果
				page: 1,
				limit: 20,
				isScroll: true,
				windowHeight: 0,
				scrollTop: 0,
				hasMoreData: false,//是否还有更多数据
			}
		},
		onLoad() {
			let _this = this;
			wx.getSystemInfo({
				success: function(res) {
					_this.windowHeight = res.windowHeight;
				}
			})
		},
		onShow() {
			this.searchHistory();
		},		
		/* computed: {
			changeValue: function(e) {
				if(this.searchVal != '') {
					this.saveHistory(this.searchVal);
				}
				this.searchList(this.searchVal);
				return this.searchVal;
			}
		}, */
		methods: {
			jumpPage(id) {
				uni.navigateTo({
					url: '/pages/classroom/classroom?laboratoryId='+id,
				});
			},
			inputChange() {
				setTimeout(() => {
					if(this.searchVal != '') {
						this.saveHistory(this.searchVal);
					}
					this.searchList(this.searchVal);
				},500)
			},
			//查询
			searchList(value,flag) {
				console.log(value);
				this.hasResult = value == '' ? false : true;
				let _this = this;
				this.$utils.requestFun('/stadium/stadium/api/queryLabortoryListApi?routh=curriculum',{
					channelId: getApp().globalData.channelId,
					page: 1,
					limit: _this.limit,
					laboratoryName: value
				},'GET').then(res=> {
					let searchData = _this.dataList;
					if(flag == 1) {
						_this.searchVal = value;
						_this.dataList = res.data.data.data && res.data.data.data.length > 0 ? res.data.data.data : [];
					}else {
						if(res.data.data.data && res.data.data.data.length > 0) {
							if(_this.page == 1) {
								searchData = [];
							}
							let dataList = res.data.data.data;
							if(dataList.length < _this.limit) {
								_this.dataList = searchData.concat(dataList);
								_this.hasMoreData = false;
							}else {
								_this.dataList = searchData.concat(dataList);
								_this.hasMoreData = true;
								_this.page = _this.page++;
							}
							_this.searchHistory();
						}else {
							if(_this.page == 1) {
								_this.dataList = [];
							}else {
								_this.dataList = searchData;
							}
						}
					}
				})
			},
			lower(e) {
				if (this.hasMoreData) {
					let page = this.page+1;
					this.page = page;
					this.searchList();
				} else {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				}
			},
			clearSearchVal() {
				this.searchVal = '';
				this.searchList('');
			},
			//查询历史记录
			searchHistory() {
				let _this = this;
				this.$utils.requestFun('/member/searchHistory/api/findSearchHistory?route=member',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					searchType: 1
				},'GET').then(res=> {
					console.log(res)
					_this.historyList = res.data.data && res.data.data.length > 0 ? res.data.data : [];
				})
			},
			//保存历史记录
			saveHistory(content) {
				let _this = this;
				this.$utils.requestFun('/member/searchHistory/api/saveSearchHistory?route=member',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					searchType: 1,
					content: content
				},'GET').then(res=> {
					
				})
			},
			//删除历史记录
			delHistory() {
				let _this = this;
				this.$utils.requestFun('/member/searchHistory/api/delAllHistory?route=member',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					searchType: 1
				},'GET').then(res=> {
					_this.searchHistory();
				})
			}
		}
	}
</script>

<style>
	.searchContainer {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.noDataTxt {
		color: #999999;
		text-align: center;
		margin: 100rpx 0;
		line-height: 200rpx;
	}
	.searchBox {
		margin: 0 24rpx;
		width: 74%;
		height: 64rpx;
		margin-top: 30rpx;
		border-radius: 32rpx;
		background-color: #F6F6F6;
	}
	.searchIcon {
		width: 31rpx;
		height: 31rpx;
		margin: 17rpx 28rpx;
		margin-left: 10rpx;
	}
	.inputBox {
		width: 76%;
		color: #999999;
		font-size: 30rpx;
		margin-top: 10rpx;
	}
	.historySearchBox {
		width: 93%;
		margin: 33rpx 24rpx;
	}
	.historySearchTit {
		width: 95%;
		text-align: left;
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
	}
	.delIcon {
		width: 32rpx;
		height: 32rpx;
	}
	.historyListBox {
		width: 98%;
		margin-right: 20rpx;
		min-height: 90rpx;
	}
	.historyListItem {
		height: 60rpx;
		background: #F6F6F6;
		border-radius: 30px;
		margin-top: 20rpx;
		margin-left: 20rpx;
		line-height: 60rpx;
		padding: 0 28rpx;
		float: left;
		font-size: 24rpx;
		color: #222222;
	}
	.searchListBox {
		margin-top: 40rpx;
	}
	.yuyueItem {
		width: 216rpx;
		height: 130rpx;
		background: #F6F6F6;
		border: 1px solid #EEEEEE;
		border-radius: 20rpx;
		float: left;
		margin-left: 22rpx;
		margin-bottom:20rpx;
		text-align: center;
	}
	.yuyueTxt {
		font-size: 30rpx;
		font-weight: bold;
		color: #222222;
		line-height: 54rpx;
		margin-top: 15rpx;
	}
	.yuyueSubTxt {
		font-size: 24rpx;
		color: #666666;
		line-height: 54rpx;
	}
	.searchBtn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 30rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
		margin-top: 30rpx;
		margin-left: 0;
	}
</style>
